<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>局部注册</title>
        <style>
            code { border: 1px solid #d1d1d1; background: #f0f0f0; }
        </style>
    </head>
    <body>

        <h3>定义、注册、使用组件 ( vue.js 2.x )</h3>
        <ol>
            <li>定义组件</li>
            <li>
                注册组件
                <ul>
                    <li>在父组件的 components 选项中实现局部注册</li>
                </ul>
            </li>
            <li>使用组件</li>
        </ol>
        

        <div id="root">
            <!-- 3、使用组件 -->
            <counter></counter>
            <counter></counter>
        </div>

        <!-- 导入 vue.js 2.x -->
        <script src="../scripts/vue@2.6.14.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            

            // 1、定义组件
            const counter = {
                // 指定组件的模板
                template: `<p>
                                <button @click="handle">{{ value }}</button>
                           </p>`,
                // 指定组件的数据
                data(){
                    return {
                        value: 1
                    }
                },
                // 指定组件的方法
                methods: {
                    handle(){
                        this.value++;
                    }
                }
            }
            
            const rootOptions = {
                el: '#root',
                data: {
                    name: 'root' 
                },
                // 2、注册组件(局部注册: 通过 父组件 的 components 实现 )
                components: {
                    // 'component-name' : componentdefinition
                    counter /* `counter` 是 `counter: counter` 的简写 */
                }
            }

            // 创建 Vue 实例
            const root = new Vue( rootOptions );
        </script>

    </body>
</html>